<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title th:text="${student.id == null ? '添加学生' : '编辑学生'}">学生表单</title>
    <style>
        .form-card {
            box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
        }
        
        .form-label {
            font-weight: 500;
        }
        
        .required-field::after {
            content: "*";
            color: #dc3545;
            margin-left: 4px;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
        }
        
        .invalid-feedback {
            font-size: 80%;
        }
        
        .btn-group-lg > .btn {
            padding: 0.5rem 1.5rem;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0.5rem 0;
            margin-bottom: 1rem;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: ">";
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/}">首页</a></li>
                <li class="breadcrumb-item"><a th:href="@{/students}">学生管理</a></li>
                <li class="breadcrumb-item active" th:text="${student.id == null ? '添加学生' : '编辑学生'}"></li>
            </ol>
        </nav>
        
        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-4"></div>
            <h2 class="h4 mb-0">
                <i class="bi bi-person-plus-fill me-2" th:if="${student.id == null}"></i>
                <i class="bi bi-person-gear me-2" th:if="${student.id != null}"></i>
                <span th:text="${student.id == null ? '添加学生' : '编辑学生'}"></span>
            </h2>
            <a th:href="@{/students}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>返回列表
            </a>
        </div>

        <!-- Alert Messages -->
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <!-- Student Form Card -->
        <div class="card form-card">
            <div class="card-body"></div>
                <form th:action="@{/students/save}" th:object="${student}" method="post" class="needs-validation" novalidate>
                    <input type="hidden" th:field="*{id}" />
                    
                    <div class="row g-3">
                        <!-- Student Number -->
                        <div class="col-md-6">
                            <label for="studentNumber" class="form-label required-field">学号</label>
                            <input type="text" class="form-control" id="studentNumber" th:field="*{studentNumber}" 
                                   required pattern="^[A-Za-z0-9]+$">
                            <div class="invalid-feedback">
                                请输入有效的学号（只能包含字母和数字）
                            </div>
                            <div class="form-text text-muted">
                                学号必须是唯一的，只能包含字母和数字
                            </div>
                        </div>
                        
                        <!-- Name -->
                        <div class="col-md-6">
                            <label for="name" class="form-label required-field">姓名</label>
                            <input type="text" class="form-control" id="name" th:field="*{name}" required>
                            <div class="invalid-feedback">
                                请输入学生姓名
                            </div>
                        </div>
                        
                        <!-- Gender -->
                        <div class="col-md-6">
                            <label for="gender" class="form-label required-field">性别</label>
                            <select class="form-select" id="gender" th:field="*{gender}" required>
                                <option value="">-- 请选择 --</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                            <div class="invalid-feedback">
                                请选择性别
                            </div>
                        </div>
                        
                        <!-- Age -->
                        <div class="col-md-6">
                            <label for="age" class="form-label required-field">年龄</label>
                            <input type="number" class="form-control" id="age" th:field="*{age}" 
                                   required min="15" max="100">
                            <div class="invalid-feedback">
                                请输入有效的年龄（15-100之间）
                            </div>
                        </div>
                        
                        <!-- Class Name -->
                        <div class="col-md-6">
                            <label for="className" class="form-label required-field">班级</label>
                            <input type="text" class="form-control" id="className" th:field="*{className}" required>
                            <div class="invalid-feedback">
                                请输入班级名称
                            </div>
                        </div>
                        
                        <!-- Enrollment Date -->
                        <div class="col-md-6">
                            <label for="enrollmentDate" class="form-label required-field">入学日期</label>
                            <input type="date" class="form-control" id="enrollmentDate" th:field="*{enrollmentDate}" required>
                            <div class="invalid-feedback">
                                请选择入学日期
                            </div>
                        </div>
                        
                        <!-- Submit Buttons -->
                        <div class="col-12 mt-4">
                            <hr>
                            <div class="d-flex justify-content-end btn-group-lg">
                                <button type="button" class="btn btn-outline-secondary me-2" 
                                        th:onclick="'window.location.href=\'' + @{/students} + '\''">
                                    <i class="bi bi-x-lg me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-lg me-1"></i>保存
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <th:block layout:fragment="scripts">
        <script>
            // Form validation
            (function() {
                'use strict';
                
                // Fetch all forms we want to apply validation to
                const forms = document.querySelectorAll('.needs-validation');
                
                // Loop over them and prevent submission
                Array.from(forms).forEach(form => {
                    form.addEventListener('submit', event => {
                        if (!form.checkValidity()) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        
                        form.classList.add('was-validated');
                    }, false);
                });
            })();
            
            // Date field default value for new student
            document.addEventListener('DOMContentLoaded', function() {
                const enrollmentDateField = document.getElementById('enrollmentDate');
                const studentIdField = document.getElementById('id');
                
                if (studentIdField.value === '') {
                    const today = new Date();
                    const year = today.getFullYear();
                    const month = String(today.getMonth() + 1).padStart(2, '0');
                    const day = String(today.getDate()).padStart(2, '0');
                    enrollmentDateField.value = `${year}-${month}-${day}`;
                }
            });
        </script>
    </th:block>
</body>
</html>